import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { ReactNode } from 'react';
import { useHistory } from 'react-router-dom';
import classNames from 'classnames';
type NavBarProps = {
   // 标题
   title?: ReactNode
    // 右侧
  right?: ReactNode;
  onBack?: () => void;
   // 用于实现固定导航
  fixed?: boolean
  left?: ReactNode;
  children?: ReactNode;
};
// export default function NavBar({ right, onBack, children }: 
  export default function NavBar({ left,title, right, onBack, children, fixed }:
  NavBarProps) {
  const history = useHistory();
  // 两种情况
  // 1. 传onBack即调用
  // 2. 不传默认返回上一页
  const handleBack = () => {
    if (onBack) return onBack();
    history.goBack();
  };
  return (
    <div className={styles.root}>
      {/* <div className="main"> */}
      <div className={classNames('main', fixed ? 'fixed' : '')}>
        {/* 后退按钮 */}
        <div className="left"  onClick={handleBack}>
          {/* <Icon type="iconfanhui" /> */}
          {left ? left : <Icon type="iconfanhui" />}
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>
        {/* 右侧内容 */}
        <div className="right">{right}</div>
      </div>
    </div>
  );
}